<template>
  <div class="teacherPictrue">
     <div id="container" v-show="!loader.show">
       <div class="header_group">
              <h6>相册</h6>
              <p>您可以更换头像或为相册添加照片</p>
        </div>
        <p class="title">第一张照片为头像，请上传符合老师形象的照片</p>
        <div class="wrap">
              <div class="caption">
                   <label>图片上传<font>(点击可修改已上传照片)</font></label>
                   <p class="show_num">{{images.length}}/8</p>
              </div>
              <ul class="pic_wrap">
                   <li v-for="image in images">
                        <img :src="image.thums"/>
                        <input type="file" @change="modefyPic($event,image.pictureId);"/>
                        <span class="del" @click="del(image.pictureId)"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1494669642&di=6b0c82ff50d50130fac2e3c688120334&src=http://static.freepik.com/free-photo/close--delete--remove-squared-icon_318-9256.jpg"/></span>
                   </li>
                   <li class="add_pic" v-show="images.length<8">
                      <img src="http://pic.58pic.com/58pic/15/86/33/98C58PICtVg_1024.jpg"/>
                      <input type="file" @change="addPic($event);" accept="image/*"/>
                   </li>
              </ul>
        </div>
        <router-link class="commit" tag="p" :to="{path:'index'}">返回</router-link>
     </div>
     <!--公共提示-->
     <tip :tip="tip" :loading="loading" :loader="loader"></tip>
     <!--专用提示-->
     <div class="commiting" v-show="commiting.show"></div>
  </div>
</template>

<script>
import tip from './tip'
export default {
    name:'teacherPictrue',
    data(){
        return{
            images:[],
            userId:'',
            tip:{
              status:false,
              msg:''
            },
            loading:{
              status:false,
              msg:''
            },
            loader:{
              show:true
            },
            commiting:{
              show:false
            }
        }
    },
    components:{
      tip
    },
    mounted:function(){
        this.userId = this.$route.query.userId;
        this.getInitialData();
    },
    methods:{
        getInitialData(){
            let _this=this;
            _this.$http.get("/api/teacherController.do?id="+_this.userId+"&type=1&getTeacherPictureListById=null").then((data)=>{
               console.log(data.body);
               var index;
               for(index in data.body){
                 if(data.body[index].compressPicture){
                   var img={};
                   img.pictureId=data.body[index].pictureId;
                   img.thums=data.body[index].compressPicture;
                   _this.images.push(img);
                 }
               }
               _this.loader.show=false;
            })
        },
        toggle(id){
            let index=this.selectedTime.indexOf(id);
            if(index>-1){
                this.selectedTime.splice(index,1);
            }else{
                 this.selectedTime.push(id);
            }
        },
        addPic(e){
           let _this=this;
            var simpleFile=e.currentTarget.files[0];
            console.log(simpleFile);
            if(simpleFile.size<=4096000){
              var reader = new FileReader();
              reader.readAsDataURL(simpleFile);
              _this.commiting.show=true;
              reader.onload = function(e){
                 var picture=this.result;
                 _this.$http.post("/api/teacherController.do?saveTeacherPicture",
                 {
                   id:_this.userId,
                   picture:picture
                 })
                 .then(
                  (response)=>{
                    _this.commiting.show=false;
                    if(response.body.result=="ok"){
                      var img={};
                      img.pictureId=response.body.pictureId;
                      img.thums=picture;
                      _this.images.push(img);
                    }else{
                      _this.tip.msg='上传失败，请重新上传';
                      _this.tip.status=true;
                      setTimeout(function(){_this.tip.status=false;},1000);
                    }
                  },
                  (error)=>{
                    _this.commiting.show=false;
                    alert(error);
                  }
                 );
              }
            }else{
              _this.tip.msg='上传照片不能超过4M';
              _this.tip.status=true;
              setTimeout(function(){_this.tip.status=false;},1000);
            }
            
        },
        modefyPic(e,pictureId){
            let _this=this;
            var simpleFile=e.currentTarget.files[0];
            console.log(simpleFile);
            if(simpleFile.size<=4096000){
              var reader = new FileReader();
              reader.readAsDataURL(simpleFile);
              _this.commiting.show=true;
              reader.onload = function(e){
                 var picture=this.result;
                 _this.$http.post("/api/teacherController.do?updateTeacherPicture",
                 {
                   id:_this.userId,
                   picture:picture,
                   pictureId:pictureId
                 })
                 .then(
                  (response)=>{
                    _this.commiting.show=false;
                    if(response.body.result=="ok"){
                      _this.images.forEach(function(v,k){
                        if(v.pictureId==pictureId){
                          v.thums=picture;
                        }
                      })
                    }else{
                      _this.tip.msg='修改失败，请重新上传';
                      _this.tip.status=true;
                      setTimeout(function(){_this.tip.status=false;},1000);
                    }
                  },
                  (error)=>{
                    _this.commiting.show=false;
                    alert(error);
                  }
                 );
              }
            }else{
              _this.tip.msg='上传照片不能超过4M';
              _this.tip.status=true;
              setTimeout(function(){_this.tip.status=false;},1000);
            }
        },
        del(pictureId){
           let _this=this;
           _this.images.forEach(function(v,k){
             if(v.pictureId==pictureId){
               _this.$http.post("/api/teacherController.do?deleteTeacherPicture",
               {
                 id:_this.userId,
                 pictureId:pictureId
               })
               .then(
                (response)=>{
                  _this.commiting.show=false;
                  if(response.body.result=="ok"){
                    _this.images.splice(k,1); 
                  }else{
                    _this.tip.msg='删除失败，请重新删除';
                    _this.tip.status=true;
                    setTimeout(function(){_this.tip.status=false;},1000);
                  }
                },
                (error)=>{
                  _this.commiting.show=false;
                  alert(error);
                }
               );
             }
           });
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.teacherPictrue
{
    .commiting
    {
      width:100%;
      height:1rem;
      top:30%;
      position:fixed;
      left:0;
      background-image:url(https://www.qy-trip.com/Assets/index/images/jz.gif);
      background-repeat:no-repeat;
      background-size:0.5rem auto;
      background-position:center;
    }
    .header_group
    {
        padding:0.5rem 0;
        text-align:center;
        h6
        {
          color:#078def;
          font-size:0.5rem;
          margin-bottom:0.3rem;
        }
        p 
        {
          color:#999;
        }
    }
    .title
    {
      line-height:0.8rem;
      height:0.8rem;
      padding:0 0.3rem;
    }
    .wrap
    {
      background:#fff;
      padding:0 0.3rem 0.25rem 0.3rem;
      .caption
      {
        line-height:0.8rem;
        height:0.8rem;
        position:relative;
        font
        {
          font-size:0.22rem;
          color:#999;
        }
        .show_num
        {
          float:right;
          color:#999;
          line-height:0.8rem;
          height:0.8rem;
        }
      }
      .pic_wrap
      {
        overflow:hidden;
        li
        {
          width:1.6rem;
          height:1.6rem;
          float:left;
          margin-right:0.1rem;
          margin-bottom:0.1rem;
          position:relative;
          img
          {
            width:100%;
            height:100%;
          }
          input
          {
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            opacity:0;
          }
          .del
          {
            width:0.4rem;
            height:0.4rem;
            display:inline-block;
            position:absolute;
            right:0;
            top:0;
            img
            {
              width:100%;
              height:100%;
            }
          }
        }
      }
    }
    .commit
    {
        margin:0.24rem;
        line-height:0.8rem;
        height:0.8rem;
        border-radius:0.1rem;
        border:1px solid #078def;
        text-align:center;
        background:#078def;
        color:#fff;
        font-size:0.32rem;
    }
}
</style>
